<template>
  <div id="clientLevel">
    <div class="clientLevel-top">
      <h3>客户等级</h3>
    </div>
    <div class="clientLevel-content">
      <el-table height="500px" :data="clientLevels" border style="width: 100%;font-size: 13px;margin-left: 20px;">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="clientLevelName" label="客户等级名称" width="300">
        </el-table-column>
        <el-table-column prop="clientLevelPrice" label="商品价格名称" width="300">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="300">
        </el-table-column>
        <el-table-column prop="status" label="是否启用" width="120">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-color="#66b1ff" inactive-color="#c1c1c1" active-value="1"
              inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="updateLevel(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog width="450px" top="120px" title="修改客户等级" :visible.sync="dialogFormVisible">
      <table>
        <tr>
          <td>客户等级名称</td>
          <td><el-input v-model="clientLevel.clientLevelName"></el-input></td>
        </tr>
        <br>
        <tr>
          <td>商品价格名称</td>
          <td><el-input v-model="clientLevel.clientLevelPrice"></el-input></td>
        </tr>
        <br>
        <tr>
          <td>备注</td>
          <td><el-input type="textarea" v-model="clientLevel.remark"></el-input></td>
        </tr>
        <br>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AddAccount from './AddAccount.vue';

export default {
  name: 'Account',
  components: {
    AddAccount
  },
  data() {
    return {
      dialogFormVisible: false,
      clientLevels: [
        {
          clientLevelName: 'test1',
          clientLevelPrice: 'test1',
          remark: 'test1',
          status: '1'
        },
        {
          clientLevelName: 'test1',
          clientLevelPrice: 'test1',
          remark: 'test1',
          status: '1'
        },
      ],
      clientLevel: {
        // clientLevelName: 'test1',
        // clientLevelPrice: 'test1',
        // remark: 'test1',
      }
    }

  },
  methods: {
    updateLevel(row) {
      this.dialogFormVisible = true
      this.clientLevel = row
    }
  }
}
</script>

<style scoped>
#clientLevel {
  width: 100%;
  height: 100%;
}

.clientLevel-top {
  width: calc(100% -20px);
  height: 60px;
  /* background-color: pink; */
  line-height: 60px;
  padding-left: 20px;
  font-size: 13px;
}

.clientLevel-top h3 {
  display: inline-block;
  margin-right: 1000px;
}

.clientLevel-content {
  width: 100%;
  height: calc(100% - 60px);
  /* background-color: skyblue; */
}

.el-input,
.el-button {
  font-size: 13px;
}

table .el-input {
  width: 260px;
}

.el-dialog__body td {
  padding-right: 10px;
}
</style>